import React, { Component } from "react";
import { StyleSheet, SafeAreaView, Dimensions, StatusBar, TouchableOpacity, Text, View , ImageBackground} from "react-native";
import { GameEngine } from "react-native-game-engine";

import Block from './TheBlock'
import Line from './TheLine'
import Score from './GameScore'
import { Loop } from "./systems/GameLoop";
import { score } from "./systems/GameLoop";
//音频
import flowers from '../../music/flowers.mp3'
// 图片
import background_engine from '../../img/background_engine.jpg'
import game_pause from '../../img/game_pause.jpg'
import game_pause_play from '../../img/game_pause_play.jpg'
import game_play from '../../img/game_play.jpg'
import block_yellow from '../../img/block_yellow.jpg'
import block_purple from '../../img/block_purple.jpg'
import block_green from '../../img/block_green.jpg'

//背景音乐
import Sound from 'react-native-sound'
Sound.setCategory('Playback');//机主静音模式同样播放声音
const Music = new Sound(flowers,(error)=>{
  if (error) {
    console.log('failed to load the sound', error);
    return;
  }
  // loaded successfully
  console.log('duration in seconds: ' + Music.getDuration() + 'number of channels: ' + Music.getNumberOfChannels());
})

//改变运动加速度实现难度递增
export let gameDifficulty = 4

const IncreasedDifficulty=()=>{
  gameDifficulty += 0.05
  setTimeout(IncreasedDifficulty,1000)
}

//触控得分机制
export let touch1 = false
export let touch2 = false
export let touch3 = false
export let touch4 = false
export let touch5 = false

export default class GamePage extends Component{
  constructor() {
    super();
    this.state = {
      score : 0,
      isRunning : false,
      tempDifficulty : 0,
      suspend : game_pause,

      gamePlay_display : 'flex',
      gameOver_display : 'none',
      gameEngine_display : 'none',
    };
  }

  suspendGame=()=>{
    if(this.state.isRunning === true){
      //暂存难度值
      this.state.tempDifficulty = gameDifficulty
      this.setState({
        isRunning : false,
        suspend : game_pause_play,
      })

      Music.pause()
    }else{
      //读取难度值
      gameDifficulty = this.state.tempDifficulty
      this.setState({
        isRunning : true,
        suspend : game_pause,
      })

      Music.play()
    }
  }

  render(){


    return (
      <ImageBackground source={background_engine} style={[styles.backgroundImg,{display:'flex'}]}>
      <SafeAreaView style={styles.canvas}>
          <GameEngine
            style={[styles.GameEngineCanvas,{display:this.state.gameEngine_display}]}

            entities={{
              block1: {
                score : this.state.score,
                position : [Dimensions.get("window").width/400*300/11,-Dimensions.get("window").height/3+0.1],
                block : block_yellow,
                renderer: <Block />},
              block2: {
                position : [Dimensions.get("window").width/400*300/11+Dimensions.get("window").width/400*300/11*2,-Dimensions.get("window").height/3],
                block : block_purple,
                renderer: <Block />},
              block3: {
                position : [Dimensions.get("window").width/400*300/11+Dimensions.get("window").width/400*300/11*4,-Dimensions.get("window").height/3],
                block : block_green,
                renderer: <Block />},
              block4: {
                position : [Dimensions.get("window").width/400*300/11+Dimensions.get("window").width/400*300/11*6,-Dimensions.get("window").height/3],
                block : block_purple,
                renderer: <Block />},
              block5: {
                position : [Dimensions.get("window").width/400*300/11+Dimensions.get("window").width/400*300/11*8,-Dimensions.get("window").height/3],
                block : block_yellow,
                renderer: <Block />},

              line:{ renderer: <Line />},

              score : {
                score : score,
                renderer:<Score />
              }
            }}

            systems={[Loop]}

            running={this.state.isRunning}
          >

            {/*暂停按钮*/}
            <ImageBackground source={this.state.suspend} style={styles.suspend}>
              <TouchableOpacity onPress={this.suspendGame} style={styles.suspend_touch}>
              </TouchableOpacity>
            </ImageBackground>

            {/*触碰得分组件*/}
            <TouchableOpacity style={styles.touch1} onPress={async ()=>{
              touch1 = true
              setTimeout(()=>{
                touch1 = false
              },15)
            }}>
            </TouchableOpacity>

            <TouchableOpacity style={styles.touch2} onPress={async ()=>{
              touch2 = true
              setTimeout(()=>{
                touch2 = false
              },15)
            }}>
            </TouchableOpacity>

            <TouchableOpacity style={styles.touch3} onPress={async ()=>{
              touch3 = true
              setTimeout(()=>{
                touch3 = false
              },15)
            }}>
            </TouchableOpacity>

            <TouchableOpacity style={styles.touch4} onPress={async ()=>{
              touch4 = true
              setTimeout(()=>{
                touch4 = false
              },15)
            }}>
            </TouchableOpacity>

            <TouchableOpacity style={styles.touch5} onPress={async ()=>{
              touch5 = true
              setTimeout(()=>{
                touch5 = false
              },15)
            }}>
            </TouchableOpacity>

            <View style={[styles.gameOver,{display : this.state.gameOver_display}]}>
              <Text>游戏结束</Text>
              <Text>最终得分{score}</Text>
            </View>
            <StatusBar hidden={true} />
          </GameEngine>

        {/*游戏开始按钮*/}
        <ImageBackground source={game_play} style={[styles.play,{display : this.state.gamePlay_display}]}>
          <TouchableOpacity style={[styles.play_touch,{display : this.state.gamePlay_display}]} onPress={()=>{
            IncreasedDifficulty()
            //游戏开始
            this.setState({
              gamePlay_display : 'none',
              isRunning : true,
              gameEngine_display : 'flex',
            })
            Music.play()
            //游戏结束
            setTimeout(()=>{
              this.setState({
                gameOver_display : "flex",
                isRunning : false
              })
              Music.pause()
            },1000*60*4+1000*35)
          }}>
          </TouchableOpacity>
        </ImageBackground>
      </SafeAreaView>
      </ImageBackground>
    );
  }
}


const styles = StyleSheet.create({
  canvas: {
    alignItems: "center",
    justifyContent: "center",
    width:Dimensions.get("window").width,
    height:Dimensions.get("window").height,
    backgroundColor : 'transparent',
    zIndex:5
  },
  backgroundImg:{
    zIndex:1
  }
  ,
  gameOver:{
    position:'absolute',
    backgroundColor:'blue',
    zIndex:10,
    width:Dimensions.get("window").width/2,
    height:Dimensions.get("window").height/1.5,
    left:Dimensions.get("window").width/8,
    top:Dimensions.get("window").height/10
  },
  play:{
    position:'absolute',
    zIndex:10,
    width:Dimensions.get("window").width/3,
    height:Dimensions.get("window").height/3.7,
    left:Dimensions.get("window").width/16*5,
    top:Dimensions.get("window").height/4*3/5*3,
  },
  play_touch:{
    position:'absolute',
    zIndex:10,
    backgroundColor:'transparent',
    width:Dimensions.get("window").width/3,
    height:Dimensions.get("window").height/3.7,
  },
  GameEngineCanvas:{
    width: Dimensions.get("window").width/400*300,
    height: Dimensions.get("window").height,
    flex: null,
    backgroundColor: "transparent",
    zIndex:8
  },
  suspend:{
    position:'absolute',
    backgroundColor:'red',
    zIndex:8,
    left:-Dimensions.get("window").width/9,
    top:Dimensions.get("window").height/10,
    width:Dimensions.get("window").width/10,
    height:Dimensions.get("window").height/5,
  },
  suspend_touch:{
    backgroundColor:'transparent',
    zIndex:10,
    width:Dimensions.get("window").width/10,
    height:Dimensions.get("window").height/5,
  },
  touch1:{
    position:'absolute',
    backgroundColor:'transparent',
    zIndex:9,
    width:Dimensions.get("window").width/3*2/5,
    height:Dimensions.get("window").height/5,
    left:Dimensions.get("window").width/24,
    top:Dimensions.get("window").height/3*2,
  },
  touch2:{
    position:'absolute',
    backgroundColor:'transparent',
    zIndex:9,
    width:Dimensions.get("window").width/3*2/5,
    height:Dimensions.get("window").height/5,
    left:Dimensions.get("window").width/24+Dimensions.get("window").width /3*2/5,
    top:Dimensions.get("window").height/3*2,
  },
  touch3:{
    position:'absolute',
    backgroundColor:'transparent',
    zIndex:9,
    width:Dimensions.get("window").width/3*2/5,
    height:Dimensions.get("window").height/5,
    left:Dimensions.get("window").width/24 +Dimensions.get("window").width/3*2/5*2,
    top:Dimensions.get("window").height/3*2,
  },
  touch4:{
    position:'absolute',
    backgroundColor:'transparent',
    zIndex:9,
    width:Dimensions.get("window").width/3*2/5,
    height:Dimensions.get("window").height/5,
    left:Dimensions.get("window").width/24 +Dimensions.get("window").width/3*2/5*3,
    top:Dimensions.get("window").height/3*2,
  },
  touch5:{
    position:'absolute',
    backgroundColor:'transparent',
    zIndex:9,
    width:Dimensions.get("window").width/3*2/5,
    height:Dimensions.get("window").height/5,
    left:Dimensions.get("window").width/24 +Dimensions.get("window").width/3*2/5*4,
    top:Dimensions.get("window").height/3*2,
  },
});
